<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组操作</title>
		
	</head>
	<body>
		<div id="app">
		<!-- 数组相关用法：
			push() 在最后追加元素
			pop() 从最后删除元素
			shift() 从开头删除元素
			unshift() 从开头追加元素
			splice() 替换数据
			sort() 按照字符的编码顺序排序
			reverse() 数组反转
		 -->
		
		 
		 <span v-for="item in array">{{item}},</span> <br />
		 
		  <input type="text" v-model.number="num" />
		 <button @click="push">push</button> <br />
		 <button @click="pop">pop</button> <br />
		 <button @click="shift">shift</button>
		 <button @click="splice">替换第一个元素</button>
		 <button @click="splice2">前三个元素改为num</button>
		 <button @click="splice3">前三个元素替换为num</button>
		 <button @click="splice4">删除第2个数据</button>
		 
		 
		 
		 
		
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					array: [1,2,3,5,4],
					num: ''
				},

				methods: {
					push(){
						this.array.push(this.num)
					},
					pop(){
						this.array.pop()
					},
					shift(){
						this.array.shift()
					},
					splice(){
						/* 操作数据的起始位置  下标从0开始
							操作的数量
							替换后的值
						 */
						this.array.splice(0,1,this.num)
					},
					splice2(){
						this.array.splice(0,3,this.num)
					},
					splice3(){
						this.array.splice(0,3,this.num,this.num,this.num)
					},
					splice4(){
						this.array.splice(1,1)
					}
				}
			})
		</script>
		
	</body>
</html>

